<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
		/>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/index.css" />
		<title>Document</title>
	</head>
	<body>
		<!-- 顶部搜索框 -->
		<!-- 这个盒子是固定定位，必须要有宽度 -->
		<div class="search-content">
			<!-- 大盒子里面分成3部分，左右是固定宽度，中间搜索框是自适应的 -->
			<a href="#" class="classify"></a>
			<div class="search">
				<form action="">
					<input type="search" value="厨卫保暖季 每千减百" />
				</form>
			</div>
			<a href="#" class="login">登陆</a>
		</div>

		<!-- banner部分 -->
		<div class="banner">
			<img src="upload/banner.png" alt="" />
		</div>

		<!-- 广告部分 -->
		<div class="ad">
			<a href="#"><img src="upload/ad1.png" alt="" /></a>
			<a href="#"><img src="upload/ad2.png" alt="" /></a>
			<a href="#"><img src="upload/ad3.png" alt="" /></a>
		</div>

		<!-- nav模块 -->
		<nav>
			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>

			<a href="#">
				<img src="upload/nav1.png" alt="" />
				<span>爆款手机</span>
			</a>
			<!-- 里面的每个小a都有一个相同的大小，是写好的 -->
		</nav>
	</body>
</html>
